import React, { useState } from "react";
import { useAppDispatch, useAppSelector } from "../../store/hooks";
import { NavBar, Button, Flex, Checkbox } from "react-vant";
import { useLocation, useNavigate } from "react-router-dom";
import { Address } from "../../components";
import {
  AddressState,
  deleteAddressActionCreator,
  modifyOrderAddressDetailActionCreator,
} from "../../store/user/userReducer";
import { Dialog } from "react-vant";
const Index: React.FC = () => {
  const addressList = useAppSelector((state) => state.user.addressList);
  const navigate = useNavigate();
  const dispatch = useAppDispatch();
  const { state } = useLocation();
  const [address, setAddress] = useState(state.address as AddressState);
  const id = state.id as string;
  const modify = () => {
    dispatch(
      modifyOrderAddressDetailActionCreator({ addressDetail: address, id: id })
    );
    navigate(-1);
  };
  return (
    <div>
      <NavBar title="选择地址" onClickLeft={() => navigate(-1)}></NavBar>
      <div className="order-list">
        {addressList.map((v, i) => {
          return (
            <Address
              isDefault={i === 0}
              {...v}
              key={v.id}
              prefixLeft={<Checkbox checked={address.id == v.id}></Checkbox>}
              onClick={() => setAddress(v)}
            ></Address>
          );
        })}
        <Button type="primary" block square onClick={() => modify()}>
          确定修改
        </Button>
      </div>
    </div>
  );
};

export default Index;
